<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        .box{ position: absolute; left:0; top:0; display: none; background-color: #f90; font-size: 22px; color:#fff;}
    </style>
</head>
<body>
    <canvas width="500" height="500" id="c1"></canvas>
    <div class="box">确定</div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext("2d");
        oGC.fillStyle = 'black';
        oGC.fillRect(0, 0, oC.width, oC.height);
        var X0;
        var Y0;
        var X;
        var Y;
        var time = 0;
        oC.onclick = function(ev){
            var ev = ev || window.event;
            console.log(ev.clientX);
            if(time == 0){
                X0 = X = ev.clientX;
                Y0 = Y = ev.clientY;
            }else if(time == 2){
                $('.box').show();
                $('.box').css({'left':X0 + oC.offsetLeft + 'px','top':Y0 + oC.offsetTop + 'px'})
            }
            drawLine(X,Y,ev.clientX,ev.clientY)
            X = ev.clientX;
            Y = ev.clientY;
            drawDir(X,Y)
            time ++;
        }
        $('.box').click(function(event) {
            drawLine(X,Y,X0,Y0);
            X0 = 0;
            Y0 = 0;
            time = 0;
            $(this).hide();
        });
        function drawDir(startX,startY){
            /*var yImg = new Image();
            var img=document.getElementById("tulip");
            oGC.drawImage(img,0,0);*/
            oGC.save();
            oGC.fillStyle = 'red';
            oGC.beginPath();
            oGC.moveTo(startX, startY);
            /*oGC.lineTo(startX+5, startY-10);
            oGC.lineTo(startX+10, startY);*/
            oGC.arc(startX,startY,5,0,360*Math.PI/180,false);
            oGC.closePath();
            oGC.globalCompositeOperation="source-over";
            oGC.fill();
            oGC.restore();
        }
        function drawLine(x0,y0,x1,y1){
            oGC.save();
            oGC.strokeStyle="red"
            oGC.beginPath();
            oGC.moveTo(x0 , y0);
            oGC.lineTo(x1, y1);
            oGC.stroke();
            oGC.restore();

        }

    }
</script>